<template>
    <div class="lesson">
        <!-- 头部 -->
        <InsideHeader :bannerType="bannerType"></InsideHeader>
       
        <!-- 面包屑 -->
        <!-- <crumb></crumb> -->
        <div class="crumb">
            <div class="block">  
                <div class="crumbL">
                    <nuxt-link :to="{name: 'index'}">首页</nuxt-link>
                    <em>></em>
                    <nuxt-link :to="{name: 'serve-serveList'}">服务支持</nuxt-link>
                    <em>></em>
                    <nuxt-link :to="{name: 'serve-culCenter'}">培训中心</nuxt-link>
                    <em>></em>
                    <nuxt-link :to="{name: 'serve-learning'}">e-Learning</nuxt-link>
                    <em>></em>
                    <nuxt-link :to="{name: 'serve-lesson'}" class="on">{{$route.params.proname}}</nuxt-link>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </div>
        </div>

        <div class="block">
            <div class="title">
                <span>
                   {{$route.params.proname}}
                </span>
            </div>
            <div class="tab">
                <ul>
                    <li @click="tabStyle(0)" :class="[{tabS:id==0}]"><span>产品课程</span></li>
                    <li @click="tabStyle(1)" :class="[{tabS:id==1}]"><span>新品讲解</span></li>
                    <li @click="tabStyle(2)" :class="[{tabS:id==2}]"><span>技术讲座</span></li>
                    <li @click="tabStyle(3)" :class="[{tabS:id==3}]"><span>产品应用</span></li>
                    <div class="clear"></div>
                </ul>
                <div class="change ">更换产品类别</div>
            </div>
            <div v-show="id===0" class="first">
                <table width="100%" cellpadding="0" cellspacing="0" border="1">
                    <tr>
                        <th width="35%">课程名称</th>
                        <th width="35%">课程简介</th>
                        <th width="15%">评分</th>
                        <th width="15%">操作</th>
                    </tr>
                    <tr v-for="(item,index) in courselistdata":key="index">
                        <td><span>{{item.trainingCourseVo.courseName}}</span></td>
                        <td><span>{{item.trainingCourseVo.courseIntroduce}}</span></td>
                        <td><p>{{item.score}}分</p></td>
                        <td>
                            <div class="look">
                                <p @click="conserinfo(item.courseOid)">查看详情</p>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- 链接 -->
        <Insidelink></Insidelink>

        <!-- 底部 -->
        <HomeHooter></HomeHooter>
    </div>
</template>

<script>
    import qs from 'qs';
    import $ from "jquery";
    import "@/assets/css/news.css";
    import InsideHeader from "@/components/head";
    import HomeHooter from "@/components/footer";
    import crumb from "@/components/crumb";
    import Insidelink from "@/components/link";
    export default {
        name: "lesson",
        components: {
            InsideHeader,
            HomeHooter,
            crumb,
            Insidelink,
        },
        data(){
            return{
                id:0,
                bannerType:'certificateW',
                proname:'',
                courselistdata:[]
            }
        },
        methods:{
            tabStyle(index){
                this.id=index
            },
            coursedata(oid){
              let id = this.$axios,
              params = qs.stringify({
                page:1,
                limit:10,
                productCode:oid
              });
              this.$api.serve.getTrainingPage(id, params).then(res => {
                let result = res.data;
                if (result.code === 1) {
                  this.courselistdata=result.data.data
                }
              });
            },
            conserinfo(oid){
                this.$router.push({ name: 'serve-courseDetail',query:{id:oid}}) 
            }
        },
        created(){
            this.coursedata(this.$route.query.id)
        }
    }
</script>

<style scoped>

</style>
